<template>
    <div class="foodbox">
        <el-image
                style="width: 100px; height: 100px"
                :src="'http://localhost:3000/'+fooodData.food_img"
                ></el-image>
        <p>{{fooodData.food_name}}</p>
        <p>价格 {{fooodData.food_price}}元</p>
        <template>
            <el-input-number v-model="num" @change="handleChange" :min="0" :max="10" size="mini"></el-input-number>
        </template>
    </div>
</template>

<script>
    export default {
        name: "xkxFoodshow",
        props:['fooodData'],
        data(){
            return{
                num:0,
                food:{
                    food_id:'',
                    food_count:'',
                    food_count_money:''
                }
            }
        },
        created() {
            console.log(this.fooodData)

        },
        methods:{
            handleChange(value) {
                this.food.food_id = this.fooodData.id
                this.food.food_count=value
                this.food.food_count_money=this.fooodData.food_price
                this.$emit('allfood',this.food)
             }
        }
    }
</script>

<style scoped>
    .foodbox{
        margin: 10px;
        float: left;
        width:17rem;
        height: 15rem;
        /*border:1px solid #55a532;*/
        background-color: white;
    }

</style>